<template>
  <el-container>
    <el-header style="height:15%;">
      <div style="height:100%;width:100%">
        <div class="dh">
          <!-- <h3 style="text-align: center;">公共文化体育设施系统</h3> -->
          <el-row :gutter="20">
            <el-col style="padding: 1px;" :span="21"><div style="height:100%;width:100%;background-color:#E9EEF3">公共文化体育设施系统</div></el-col>
            <el-col style="padding: 1px;" :span="3"><div style="height:100%;width:100%;background-color:#E9EEF3">
              <el-link href="http://localhost:8080/#/register" icon="el-icon-user">注册</el-link>
              <el-link href="http://localhost:8080/#/login" icon="el-icon-user-solid">登录</el-link>
              </div></el-col>
          </el-row>
        </div>
        <div class="ml">
          <el-menu :default-active="this.$router.path" class="el-menu-demo" mode="horizontal" router>
            <el-menu-item index="welcome">首页</el-menu-item>
            <el-menu-item index="venues">场馆</el-menu-item>
            <el-menu-item index="managements">管理单位</el-menu-item>
            <el-menu-item index="map">地图服务</el-menu-item>
            <el-menu-item>
              <a href="http://yiyang.gov.cn/wlgt/index.htm" target="_blank">益阳市文化旅游广电体育局</a>
            </el-menu-item>
            <el-menu-item>
              <a href="http://www.gov.cn/zwgk/2005-05/23/content_157.htm" target="_blank">公共文化体育设施条例</a>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </el-header>
    <el-main>

      <router-view></router-view>
    </el-main>
    <el-footer style="height:25%;text-align: center;">
      <h3 style="font-size: 0.5em;">湖南城市学院</h3>
      <h3 style="font-size: 0.5em;">“公共文化体育设施系统”-毕业设计 by 岳鹏龙</h3>
    </el-footer>
</el-container>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
    .el-container {
      height: 100%;
    }

  .el-header {
    height: 20%;
    color: #333;
    text-align: center;
    line-height: 200%;
    padding: 0%;
  }

  .el-footer {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 120px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    height: 200%;
    color: #333;
    text-align: center;
    // line-height: 160px;
  }
.el-row {
    height: 100px;
    width: 100%;
  }
.el-col {
  padding: 0px;
  // height: 100px;
}
  .bg-purple {
    background: #3b73b3;
  }

  .ml {
    height: 60%;
  }

  .dh {
    // background-image: ;
    height: 40%;
  }

  .el-menu-demo{
    background-color: #ffffff;
    height: 100%;
  }

  .el-link {
    padding-left: 5px;
    float: right;
  }
</style>>
